<template>
  <div class="question-correction-container">
    <div class="title-bar">
      <h3 class="page-title">试题批改</h3>
    </div>

    <div class="question-list" v-if="questions.length > 0">
      <el-card
          v-for="(question, index) in questions"
          :key="question.id"
          class="question-card"
          shadow="hover"
      >
        <!-- 题目头部信息 -->
        <div class="question-header">
          <span class="question-number">{{ index + 1 }}</span>
          <el-tag :type="getTypeTagColor(question.type)">{{getQuestionType(question.type) }}</el-tag>
          <span class="question-score">满分: {{ question.fullScore }}分</span>
        </div>

        <!-- 题目内容 -->
        <div class="question-content" v-html="question.content"></div>

        <!-- 选项（选择题） -->
        <div class="question-options" v-if="question.options && question.options.length">
          <div v-for="option in question.options" :key="option" class="option-item">
            {{ option }}
          </div>
        </div>

        <!-- 考生答案 -->
        <div class="answer-section">
          <div class="answer-label">考生答案:</div>
          <div class="user-answer" v-html="formatUserAnswer(question)"></div>
        </div>

        <!-- 参考答案 -->
        <div class="answer-section">
          <div class="answer-label">参考答案:</div>
          <div class="correct-answer" v-html="formatCorrectAnswer(question)"></div>
        </div>

        <!-- 批改区域 -->
        <div class="correction-section">
          <el-input-number
              v-model.number="question.score"
              :min="0"
              :max="question.fullScore"
              :step="0.5"
              size="small"
              placeholder="输入得分"
          ></el-input-number>

          <el-button
              :loading="question.saving"
              type="primary"
              size="small"
              @click="confirmScore(question)"
              :disabled="question.saving"
          >
            确认给分
          </el-button>

          <span
              v-if="question.saved"
              class="save-status"
          >
            <i class="el-icon-check"></i> 已保存
          </span>
        </div>
      </el-card>
    </div>
    <div v-else class="no-questions-tip">暂无试题需要批改</div>
  </div>
</template>

<script>
export default {
  name: 'QuestionCorrection',
  data() {
    return {
      // 试题数据
      questions: []
    }
  },
  mounted() {
    // 获取试题列表
    this.getQuestion();
  },
  methods: {

    getQuestion(){
      this.$http.get('/api/GetExamRecordQuestion').then(res => {
        this.questions = res.data.data;
      });
    },
    // 获取题型标签颜色
    getTypeTagColor(type) {
      const colorMap = {
        1: 'primary',
        2: 'success',
        3: 'warning',
        4: 'info',
        5: 'danger'
      };
      return colorMap[type] || 'primary';
    },

    // 格式化用户答案
    formatUserAnswer(question) {
      if (question.type === 'radio' || question.type === 'judge') {
        return question.userAnswer;
      } else if (question.type === 'checkbox') {
        return question.userAnswer.join('、');
      } else {
        return question.userAnswer;
      }
    },

    // 格式化参考答案
    formatCorrectAnswer(question) {
      if (question.type === 'radio' || question.type === 'judge') {
        return question.correctAnswer;
      } else if (question.type === 'checkbox') {
        return question.correctAnswer.join('、');
      } else {
        return question.correctAnswer;
      }
    },

    // 确认给分
    confirmScore(question) {
      // 验证分数
      if (!question.score || question.score < 0 || question.score > question.fullScore) {
        this.$message.warning(`请输入0-${question.fullScore}之间的分数`);
        return;
      }
      // API调用
      setTimeout(() => {
        question.saving = false;
        this.$http.put('/api/UpdateExamRecordQuestion', {
          id: question.id,
          score: question.score,
          recordId: question.recordId,
          questionId: question.questionId
        }).then(res => {
          this.$message.success('保存成功');
          question.saved = true;
        });
      }, 800);
    },

    // 获取试题类型名称
    getQuestionType(type) {
      const typeMap = {
        1: '单选题',
        2: '多选题',
        3: '判断题',
        4: '填空题',
        5: '简答题'
      };
      return typeMap[type] || '未知类型';
    },

  }
};
</script>

<style scoped>
.question-correction-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.title-bar {
  margin-bottom: 20px;
}

.page-title {
  font-size: 20px;
  font-weight: 500;
  color: #303133;
  margin: 0;
}

.question-list {
  display: grid;
  gap: 20px;
}

.question-card {
  padding: 20px;
}

.question-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.question-number {
  display: inline-block;
  width: 24px;
  height: 24px;
  line-height: 24px;
  border-radius: 50%;
  background-color: #409eff;
  color: white;
  text-align: center;
  font-size: 14px;
  margin-right: 10px;
}

.question-score {
  margin-left: 15px;
  color: #909399;
}

.question-content {
  line-height: 1.6;
  font-size: 15px;
  margin-bottom: 15px;
}

.question-options {
  margin-bottom: 15px;
}

.option-item {
  margin-bottom: 5px;
}

.answer-section {
  margin-bottom: 15px;
}

.answer-label {
  font-weight: 500;
  color: #606266;
  margin-bottom: 5px;
}

.user-answer {
  padding: 10px;
  background-color: #fafafa;
  border-radius: 4px;
  line-height: 1.6;
}

.correct-answer {
  padding: 10px;
  background-color: #f0f9eb;
  border-radius: 4px;
  line-height: 1.6;
  color: #67c23a;
}

.correction-section {
  display: flex;
  align-items: center;
  margin-top: 20px;
}

.correction-section .el-input-number {
  width: 100px;
  margin-right: 10px;
}

.save-status {
  margin-left: 10px;
  color: #67c23a;
}
.no-questions-tip {
  text-align: center;
  padding: 50px 0;
  color: #999;
  font-size: 16px;
}
</style>